<template>
  <el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="字段标题" :label-width="formLabelWidth" prop="colTitle">
        <el-input
            v-model="form.colTitle"
            autocomplete="off"
            placeholder="请输入字段标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="字段名" :label-width="formLabelWidth" prop="colName">
        <el-input
            v-model="form.colName"
            autocomplete="off"
            placeholder="请输入字段名"
        ></el-input>
      </el-form-item>
      <el-form-item label="属性名" :label-width="formLabelWidth" prop="propName">
        <el-input
            v-model="form.propName"
            autocomplete="off"
            placeholder="请输入属性名"
        ></el-input>
      </el-form-item>
      <el-form-item label="排序字段" :label-width="formLabelWidth" prop="sort">
        <el-input-number
            min="1"
            v-model="form.sort"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="数据类型" :label-width="formLabelWidth" prop="colType">
        <el-select v-model="form.colType" clearable placeholder="请选择数据类型">
          <el-option
              v-for="item in FieldTypeList"
              :key="item.name"
              :label="item.desc"
              :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="表单类型" :label-width="formLabelWidth" prop="formType">
        <fortress-select
            v-model="form.formType"
            :dictList="ViewFormTypeList"
            placeholder="请选择表单类型"
            clearable
        ></fortress-select>
      </el-form-item>
      <el-form-item label="数据集类型" :label-width="formLabelWidth" prop="dataType">
        <fortress-select
            v-model="form.dataType"
            :dictList="dataTypeList"
            placeholder="请选择数据集类型"
            clearable
        ></fortress-select>
      </el-form-item>

      <el-form-item label="数据集配置" :label-width="formLabelWidth" prop="dataConfig">
        <template v-if="form.dataType==1">
          <fortress-select
              v-model="form.dataConfig.dict"
              :dictList="dictList"
              placeholder="请选择"
              clearable
          ></fortress-select>
        </template>
        <template v-if="form.dataType==2">
          <el-input
              v-model="form.dataConfig.enumObj.enumName"
              autocomplete="off"
              placeholder="请输入枚举名"
          ></el-input>
          <el-input
              v-model="form.dataConfig.enumObj.moduleName"
              autocomplete="off"
              placeholder="请输入模块名"
          ></el-input>
        </template>
        <template v-if="form.dataType==3">
          <el-input
              v-model="form.dataConfig.urlObj.url"
              autocomplete="off"
              placeholder="请输入URL地址"
          ></el-input>
          <el-input
              v-model="form.dataConfig.urlObj.code"
              autocomplete="off"
              placeholder="请输入CODE字段"
          ></el-input>
          <el-input
              v-model="form.dataConfig.urlObj.name"
              autocomplete="off"
              placeholder="请输入NAME字段"
          ></el-input>
        </template>
        <template v-if="form.dataType==4">
          <el-input
              v-model="form.dataConfig.jsonObj"
              autocomplete="off"
              placeholder="请输入JSON格式"
              clearable
          ></el-input>
        </template>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
      <el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  memberextendfieldconfigInfo,
  memberextendfieldconfigSave,
  memberextendfieldconfigEdit
} from "@/api/member/memberextendfieldconfig.js";
import {sysDictList} from "@/api/system/sysdict.js"
import {enumList,} from "@/api/public.api.js";
import * as ftVal from "@/common/fortressValidator.js";

export default {
  data() {
    return {
      visible: false,
      form: {
        colTitle: "",
        colName: "",
        propName: "",
        colType: "",
        formType: "",
        dataType: "",
        sort: "1",
        dataConfig: {
          dict: "",
          enumObj: {
            enumName: "",
            moduleName: "",
          },
          urlObj: {
            url: "",
            code: "",
            name: "",
          },
          jsonObj: "",
        },
      },
      formLabelWidth: "160px",
      rules: {
        colTitle: [
          {required: true, message: "请输入字段标题", trigger: "blur"},
        ],
        colName: [
          {required: true, message: "请输入字段名", trigger: "blur"},
        ],
        sort: [
          {required: true, message: "请输入排序字段", trigger: "blur"},
          {validator: ftVal.validatePInteger, trigger: "blur"},
        ],
        propName: [
          {required: true, message: "请输入属性名", trigger: "blur"},
        ],
        colType: [
          {required: true, message: "请输入数据类型", trigger: "blur"},
        ],
      },
      FieldTypeList: [],
      ViewFormTypeList: [],
      dataTypeList: [],
      dictList: [],
    };
  },
  created() {
  },
  methods: {

    queryEnumList() {
      this.FieldTypeList = [];
      enumList("FieldType", "member").then((resp) => {
        if (resp.code == 0) {
          this.FieldTypeList = resp.data;
        }
      });
      this.ViewFormTypeList = [];
      enumList("ViewFormType", "").then((resp) => {
        if (resp.code == 0) {
          this.ViewFormTypeList = resp.data;
        }
      });
      this.dataTypeList = [];
      enumList("ListDataType", "").then((resp) => {
        if (resp.code == 0) {
          this.dataTypeList = resp.data;
        }
      });
      this.dictList = []
      sysDictList().then(resp => {
        if (resp.code == 0) {
          this.dictList = resp.data
        }
      })
    },
    init(id) {
      this.resetForm();
      this.queryEnumList();
      //修改
      if (id) {
        memberextendfieldconfigInfo(id).then((resp) => {
          if (resp.code == 0) {
            if (resp.data.dataConfig == null) {
              resp.data.dataConfig = {
                dict: "",
                enumObj: {
                  enumName: "",
                  moduleName: ""
                },
                urlObj: {
                  url: "",
                  code: "",
                  name: ""
                },
                jsonObj: ""
              }
            } else {
              resp.data.dataConfig = JSON.parse(resp.data.dataConfig)
            }
            this.$nextTick(() => {
              this.form = {
                ...this.form,
                ...resp.data,
              };
            });
          } else {
            this.$msg({
              message: resp.msg,
              type: "error",
            });
          }
        });
      }
      this.visible = true;
    },
    //提交表单数据
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          //修改
          this.form.dataConfig = JSON.stringify(this.form.dataConfig)
          if (this.form.id) {
            memberextendfieldconfigEdit(this.form).then((resp) => {
              if (resp.code == 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.$emit("refreshData");
                this.visible = false;
              } else {
                this.$msg({
                  message: resp.msg,
                  type: "error",
                });
              }
            });
            //新增
          } else {
            memberextendfieldconfigSave(this.form).then((resp) => {
              if (resp.code == 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.$emit("refreshData");
                this.visible = false;
              } else {
                this.$msg({
                  message: resp.msg,
                  type: "error",
                });
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.form = {
        colTitle: "",
        colName: "",
        propName: "",
        colType: "",
        formType: "",
        dataType: "",
        sort: "1",
        dataConfig: {
          dict: "",
          enumObj: {
            enumName: "",
            moduleName: "",
          },
          urlObj: {
            url: "",
            code: "",
            name: "",
          },
          jsonObj: "",
        },
      };
      this.$nextTick(() => {
        if (this.$refs["form"]) {
          this.$refs["form"].resetFields();
        }
      });
    },
    toHump(name) {
      const arr = name.split('_')
      for (var i = 1; i < arr.length; i++) {
        arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1, arr[i].length - 1)
      }
      return arr.join('')
    }
  },
  watch: {
    "form.colName"(newVal) {
      this.form.propName = this.toHump(newVal)
    }
  }
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  max-height: 274px;
  padding: 7px;
  overflow: hidden;
  overflow-y: auto;
  font-weight: normal;
}
</style>
